<style>
    .layui-upload-img {
        width: 150px;
        height: 150px;
    }
    .mybtn-delete{
        background-color:#eee;
        width:100%;
        text-align: center;
    }
    .mybtn-delete:hover{
        background-color:#ccc;
        cursor: pointer;
    }
</style>
<div class="fsh-pop">
    <fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
        <legend>系统设置</legend>
    </fieldset>
    <div id="sys_form" class="layui-form" lay-filter="sys_form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">系统名称</label>
                <div class="layui-input-block">
                    <input name="sysName" lay-verify="required" placeholder="请输入内容" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图片</label>
            <div class="layui-input-block">
                <div class="layui-inline" id="imgShowDiv">
                    <!--                <img class="layui-upload-img" src="http://file.sxycy.cn:8888/group1/M00/00/2F/wKgBBV5OZl6AWlsSAAJHWcI4ncE777.jpg">-->
                </div>
                <div class="layui-inline">
                    <div class="layui-upload">
                        <button type="button" style="" class="layui-btn" id="upload_sysimg">添加图片</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-normal" lay-submit=""
                        lay-filter="sys_form">保存
                </button>
                <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-warm btn-reset" lay-filter="sys_form">
                    重置
                </button>
            </div>
        </div>
    </div>


    <fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
        <legend>RTMP设置</legend>
    </fieldset>
    <div id="rtmp_form" class="layui-form" lay-filter="rtmp_form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>外网域名</label>
                <div class="layui-input-block">
                    <input name="wan_domain" lay-verify="required" placeholder="请输入内容" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>外网IP</label>
                <div class="layui-input-block">
                    <input name="wan_ip" lay-verify="required" placeholder="请输入内容" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>内网IP</label>
                <div class="layui-input-block">
                    <input name="lan_ip" lay-verify="required" placeholder="请输入内容" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>外网HLV端口</label>
                <div class="layui-input-block">
                    <input name="wan_hlv_port" maxlength="20" lay-verify="required" placeholder="请输入内容"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>内网HLV端口</label>
                <div class="layui-input-block">
                    <input name="lan_hlv_port" maxlength="20" lay-verify="required" placeholder="请输入内容"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>外网RTMP端口</label>
                <div class="layui-input-block">
                    <input name="wan_rtmp_port" maxlength="20" lay-verify="required" placeholder="请输入内容"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>内网RTMP端口</label>
                <div class="layui-input-block">
                    <input name="lan_rtmp_port" maxlength="20" lay-verify="required" placeholder="请输入内容"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <div class="layui-inline">
                <label class="layui-form-label">外网直播控制端口</label>
                <div class="layui-input-block">
                    <input name="wan_http_port" maxlength="20" lay-verify="required" placeholder="请输入内容"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">内网直播控制端口</label>
                <div class="layui-input-block">
                    <input name="lan_http_port" maxlength="20" lay-verify="required" placeholder="请输入内容"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-normal" lay-submit=""
                        lay-filter="rtmp_form">保存
                </button>
                <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-warm btn-reset"
                        lay-filter="rtmp_form">重置
                </button>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
        <legend>fastdfs设置</legend>
    </fieldset>
    <div id="fast_form" class="layui-form" lay-filter="fast_form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>fastdfsWeb地址</label>
                <div class="layui-input-block">
                    <input name="webServerUrl" lay-verify="required" placeholder="请输入内容" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-normal" lay-submit=""
                        lay-filter="fastdfs_form">保存
                </button>
                <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-warm btn-reset"
                        lay-filter="fastdfs_form">重置
                </button>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">

    layui.use(['form', 'upload'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var fastServer = "";

        function saveRTMP_CONFIG() {
            form.validate("rtmp_form");
        }

        //rtmp表单
        form.on('submit(rtmp_form)', function (data) {
            var field = data.field || {};
            field = (JSON.stringify(field));
            ajax({
                url: context + '/api/sysConfig/updateRtmpConfig',
                data: field,
                type: 'PATCH',
                contentType: "application/json;charset-UTF-8",
                success: function (result) {
                    console.log(result);
                    if (result.success) {
                        layer.close();
                        layer.msg("保存成功,数量:" + result.data, {icon: 1, time: 2000});
                    } else {
                        layer.msg(result.errorMsg || result.msg, {icon: 2, time: 2000});
                    }
                }
            });
            return false;
        });

        //提交fastdfs表单
        form.on('submit(fastdfs_form)', function (data) {
            var field = data.field || {};
            field = (JSON.stringify(field));
            ajax({
                url: context + '/api/sysConfig/updateFastfdsConfig',
                data: field,
                type: 'PATCH',
                contentType: "application/json;charset-UTF-8",
                success: function (result) {
                    console.log(result);
                    if (result.success) {
                        layer.close();
                        layer.msg("保存成功,数量:" + result.data, {icon: 1, time: 2000});
                    } else {
                        layer.msg(result.errorMsg || result.msg, {icon: 2, time: 2000});
                    }
                }
            });
            return false;
        });


        //提交图片表单
        form.on('submit(sys_form)', function (data) {
            var field = data.field || {};
            var s = $(".layui-upload-img");
            var str = "";
            s.each(function (index, el) {
                if (index != 0) {
                    str += ",";
                }
                str += $(el).attr("source");
            });
            field.sysImg = str;
            delete field.attach;
            field = (JSON.stringify(field));
            console.log(field);
            ajax({
                url: context + '/api/sysConfig/updateConfig',
                data: field,
                type: 'PATCH',
                contentType: "application/json;charset-UTF-8",
                success: function (result) {
                    // console.log(result);
                    if (result.success) {
                        layer.close();
                        layer.msg("保存成功,数量:" + result.data, {icon: 1, time: 2000});
                    } else {
                        layer.msg(result.errorMsg || result.msg, {icon: 2, time: 2000});
                    }
                }
            });
            return false;
        });


        //图片表单上传功能
        var uploadInst = upload.render({
            elem: '#upload_sysimg'
            , url: context + '/api/fileupload/add'
            , field: 'attach'
            , done: function (res) {
                if (res.success) {
                    addOne(res.data);
                } else {
                    layui.layer.msg('上传失败');
                }
            }
        });

        // $("#upload_sysimg").on("click", function(){
        //     addOne("group1/M00/00/2F/wKgBBV5OZl6AWlsSAAJHWcI4ncE777.jpg");
        // });


        //生产随机ID
        function genID(length) {
            return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
        }

        //添加一张图片
        function addOne(imgStr) {
            var div = $("#imgShowDiv");
            div.append(getImgHtml(imgStr));
        }


        //图片html
        function getImgHtml(imgStr) {
            var id = "_" + genID(10);
            return "<div style='float: left; margin-right: 10px;' id='" + id + "'>" +
                "<img id='" + id + "-img' class='layui-upload-img' source='" + imgStr + "' src='" + fastServer + imgStr + "' /><br/>" +
                "<div class='mybtn-delete' style=''  onClick=\"delImgSpan('" + id + "')\">删除</div></div>";
            // return "<div style='float: left; margin-right: 10px;' id='"+id+"'><img id='" + id + "-img' class='layui-upload-img' src='"+ fastServer + imgStr + "' /><br/><div style='background-color:#eee;width:100%;text-align: center; div:hover: red;'  onClick=\"alert('"+id+"')\">删除</div></div>";
        }

        //初始化
        function iniSysImg(imgStr) {
            if (typeof (imgStr) == 'string' && imgStr.length > 0) {
                var div = $("#imgShowDiv");
                div.html("");
                var s = imgStr.split(",");
                var html = "";
                for (var i = 0; i < s.length; i++) {
                    html += getImgHtml(s[i]);
                }
                div.html(html);
            }
        }

        //初始化入口
        function ini(imgStr) {
            if (fastServer == '') {
                iniFastServer(iniSysImg, imgStr);
            } else {
                iniSysImg(imgStr);
            }
        }

        //获取fastdfs服务器地址
        function iniFastServer(callback, imgStr) {
            $.ajax({
                url: context + "/api/fileupload/getserver",
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    fastServer = data.data;
                    callback(imgStr);
                }
            });
        }

        function loadAll_config() {
            $.ajax({
                url: context + '/api/sysConfig/list',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    if (data.success) {
                        layui.form.val('rtmp_form', data.data);
                        layui.form.val('fast_form', data.data);
                        layui.form.val('sys_form', data.data);
                        //初始化图片
                        // ini("group1/M00/00/2F/wKgBBV5OZl6AWlsSAAJHWcI4ncE777.jpg,group1/M00/00/2F/wKgBBV5OZl6AWlsSAAJHWcI4ncE777.jpg,group1/M00/00/2F/wKgBBV5OZl6AWlsSAAJHWcI4ncE777.jpg");
                        ini(data.data.sysImg);
                    } else {
                        layui.layer.msg('初始化失败');
                    }
                }
            });
        }

        $(".btn-reset").on("click", function () {
            loadAll_config()
        });
        loadAll_config();
    });

    //删除一张
    function delImgSpan(id) {
        var r = confirm("确定删除!");
        if (r == true) {
            $("#" + id).remove();
        }
    }
</script>